<template>
  <div
    class="listNavigationComponent"
    v-if="oItem"
    :style="{
      paddingTop: oItem.main.paddingTop + 'px',
      paddingBottom: oItem.main.paddingBottom + 'px',
      paddingLeft: oItem.main.paddingLR + 'px',
      paddingRight: oItem.main.paddingLR + 'px',
    }"
  >
    <ul
      class="wrapper"
      :style="{
        borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
        borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
        borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
        borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
      }"
    >
      <li
        v-for="cl in oItem.main.navList"
        :key="cl.id"
        :style="{
          marginBottom: oItem.main.listInterval + 'px',
          backgroundColor: oItem.main.navBgColor||'transparent',
        }"
        :class="oItem.main.navList.length==1&&!cl.imgUrl&&!cl.showMore&&!cl.showMore?'singleButton':''"
      >
        <div class="left" :style="{ color: oItem.main.navFontColor||'transparent' }">
          <img
            v-if="
              cl.imgUrl != '' &&
              cl.imgUrl.indexOf('icon-') == -1
            "
            :src="cl.imgUrl"
            alt
          />
          <i
            v-if="cl.imgUrl && cl.imgUrl.indexOf('icon-') > -1"
            :class="cl.imgUrl"
          ></i>
          <span>{{ cl.name }}</span>
        </div>
        <div class="right" v-if="cl.showMore||cl.showIcon">
          <span :style="{ color: oItem.main.navRightSeeColor||'transparent' }">{{ cl.showMore }}</span>
          <img
            v-if="
              cl.showIcon != '' &&
              cl.showIcon.indexOf('icon-') == -1
            "
            :src="cl.showIcon"
            alt
          />
          <i
            v-if="cl.showIcon && cl.showIcon.indexOf('icon-') > -1"
            :class="cl.showIcon"
          ></i>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "listNavigationComponent",
  data() {
    return {
      oItem: null,
      rightIndex: 0,
      catalogIndex: 0,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      //console.log("listNavigationComponent被通知更新");
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.listNavigationComponent {
  display: flex;
  width: 100%;box-sizing: border-box;
  .wrapper {
    display: flex;
    width: 100%;overflow: hidden;box-sizing: border-box;
    flex-direction: column;
    li {
      width: 100%;
      height: 50px;
      padding: 10px;
      box-sizing: border-box;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-bottom: none;
        margin-bottom: 0 !important;
      }
      &.singleButton{justify-content:center;
        .left{width:100%;justify-content: center;
          span{position: static;}
        }
      }
      .left {
        display: flex;
        align-items: center;
        min-width: 50%;
        justify-content: flex-start;
        position: relative;
        i {
          display: flex;
          justify-content: center;
        }
        img {
          height: 16px;
          width: 16px;
        }
        span {
          position: absolute;
          left: 22px;
        }
      }
      .right {
        display: flex;
        align-items: center;
        min-width: 50%;
        justify-content: flex-end;
        span{margin-right: 5px;}
        i {
          display: flex;
          justify-content: center;
          font-size: 12px;color:#999;
        }
        img {
          height: 16px;
          width: 16px;
        }
      }
    }
  }
}
</style>